<template>
  <el-card v-loading="config.loading" class="max-view-height">
    <el-button type="primary" size="small" @click="add">添 加</el-button>
    <el-row v-loading="config.loading" class="table-container">
      <empty v-if="isEmpty(tableData)" />
      <div
        v-else
        ref="table"
        class="crowd-list"
        :style="`height: ${tableMaxHeight}px;max-height:${tableMaxHeight}px`"
      >
        <div
          v-for="row in tableData"
          :key="row.id"
          class="crowd-li"
          @click="toDetail(row)"
        >
          <el-row :gutter="20">
            <el-col :span="8"> 特殊人群名称：{{ row.title }} </el-col>
            <el-col :span="8"> 人数：{{ row.number }}人 </el-col>
            <el-col :span="8"> 添加时间：{{ row.addTime }} </el-col>
          </el-row>
        </div>
      </div>
      <abstract-pagination
        :model="searchForm"
        @current-change="pageChange"
        @size-change="pageSizeChange"
      />
    </el-row>
    <add-dialog v-model="addDialog" @success="success"></add-dialog>
  </el-card>
</template>

<script>
import tableMixin from '@/mixin/tablePageMixin'
import autoAdaptHeightMixin from './autoAdaptHeightMixin'
import AddDialog from './components/addDialog.vue'
import Empty from '@/components/Empty'
import { isEmpty } from '@/utils'
import { request } from '@/api/request'

export default {
  name: 'SpecialCrowdSign',

  components: {
    AddDialog,
    Empty
  },

  mixins: [tableMixin, autoAdaptHeightMixin],

  data() {
    return {
      addDialog: false
    }
  },

  methods: {
    isEmpty,

    success() {
      this.search()
    },

    add() {
      this.addDialog = true
    },

    search() {
      if (this.config.loading) return
      this.config.loading = true
      request(
        'company/users/specialCrowdSign/index',
        { p: this.searchForm.page, limit: this.searchForm.pageSize },
        (res) => {
          this.searchForm.total = res.data.count
          this.tableData = res.data._list
        }
      ).finally(() => {
        this.config.loading = false
      })
    },

    toDetail({ id, title }) {
      this.$router.push(`${this.$route.fullPath}/detail/${id}/${title}`)
    }
  }
}
</script>

<style lang="scss" src="./style.scss" scoped></style>
